<template>
    <div :class="['header', isScrolling ? 'shadow' : '']">
        <div class="header-brand">
            <strong>MOCK</strong> / 接口平台
        </div>
        <div class="header-op">
            <Select
                class="header-searchbar"
                v-if="option.searchBar.isShow"
                filterable
                clearable
                remote
                :remote-method="handleSearch"
                :loading="searchLoading"
                placeholder="在本项目下搜索接口"
                icon="ios-search">
                <Option
                    v-for="(item, index) in searchResults"
                    :value="item.apiId"
                    :key="index">
                    {{`${item.apiPath} (${item.apiType}，${item.apiDesc})`}}
                </Option>
            </Select>
            <span class="header-username">潘飞（panfei08）</span>
            <span class="header-support">SUPPORT</span>
        </div>
    </div>
</template>

<script>
    import { debounce } from '../../lib/utils';

    export default {
        name: 'Header',
        props: {
            option: {
                type: Object,
                default: () => {},
            }
        },
        data() {
            return {
                searchLoading: false,
                searchResults: [],
            }
        },
        computed: {
            isScrolling() {
                return this.option.isScrolling;
            }
        },
        created() {
        },
        methods: {
            handleSearch: function(keyword) {
                if (keyword !== '') {
                    this.keyword = keyword;
                    this.debounceSearch();
                }
            },

            debounceSearch: debounce(function() {
                const ajaxOption = this.option.searchBar.ajaxOption;

                this.searchLoading = true;
                this.Ajax(ajaxOption)
                    .then((res) => {
                        this.searchResults = [];
                        if (this.keyword === res.data.data.keyword) {
                            this.searchResults = res.data.data.apiList;
                        }
                        this.searchLoading = false;
                    });
            }, 800),
        },
    }
</script>

<style lang="less" scoped>
    .header {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        z-index: 901;
        padding: 0 4%;
        display: flex;
        line-height: 70px;
        background-color: #fff;
        justify-content: space-between;
        &.shadow {
            box-shadow: 0 3px 9px rgba(0, 0, 0, 0.09);
        }
        &:after {
            background-color: #fdfdfd;
        }
        .header-brand {
            letter-spacing: 3px;
            font-size: 15px;
            color: #000;
        }
        .header-op {
            font-size: 13px;
            justify-content: flex-end;
            .header-support {
                cursor: pointer;
                margin-left: 30px;
                color: rgba(0, 0, 0, 0.26);
            }
        }
        .header-searchbar {
            width: 300px;
            margin-right: 30px;
        }
    }
</style>
